<template>
    <view style="padding: 15px;">
        <div v-if="tbSeckillGoods">
            <div style="background-color: #FFFFFF; padding-bottom: 2px;">
                <view class="goods-list" style="height: 110px; display: flex; margin-bottom: 6px;">
                    <view @click.stop.prevent="gotoGoodsDetail(tbSeckillGoods.tbGoods)">
                        <myImg :obj="tbSeckillGoods" :sysFile="{fkId: tbSeckillGoods.sysFileFkId}" :key="tbSeckillGoods.id"
                               :customStyle="'pointer-events: none; height: 100px;  width:100px; background-size: cover; background-repeat: no-repeat; background-position: center;'"
                               :defaultUrl="'/pages/sub/sub2-store-platform/static/default-image/goods.jpg'"
                               :imageView="'imageView2/1/w/200/h/200'"
                        ></myImg>
                    </view>
                    <view style="padding: 6px 5px 5px 10px; width: 100%;" @click.stop.prevent="gotoGoodsDetail(tbSeckillGoods.tbGoods)">
                        <view style="height: 60px; overflow: hidden; padding-top: 5px;">
                            {{tbSeckillGoods.tbGoods.title}}
                        </view>
                        <view style="overflow: hidden; color: grey; height: 19px;">
                            {{tbSeckillGoods.tbGoods.subTitle | toEmptyStr}}
                        </view>
                        <view style="display: flex; border-bottom: 1px solid #eeeeee; padding-bottom: 4px;"
                              :style="{'border-bottom': '0px'}">
                            <view style="font-weight: bold; color: red; width: 100%;">
                                ￥{{tbSeckillGoods.seckillPrice | toFixed2}}
                            </view>
                        </view>
                    </view>
                </view>
            </div>
        </div>

        <u-form ref="validateFormRef" :model="validateForm.value" :label-width="150">
            <u-form-item label="秒杀价格" prop="seckillPrice" required>
                <u-input v-model="validateForm.value.seckillPrice" placeholder="请输入秒杀价格（单位/元）"/>
            </u-form-item>

            <u-form-item label="秒杀数量" prop="seckillNumber" required>
                <u-input v-model="validateForm.value.seckillNumber" placeholder="请输入秒杀数量"/>
            </u-form-item>

            <u-form-item label="开始时间" prop="startTime" required>
                <u-input type="select" :select-open="validateForm.controls.startTime.isShow"
                         v-model="validateForm.value.startTime" placeholder="请选择开始时间"
                         @click="validateForm.controls.startTime.isShow = true; $forceUpdate();"/>
            </u-form-item>

            <u-form-item label="结束时间" prop="endTime" required>
                <u-input type="select" :select-open="validateForm.controls.endTime.isShow"
                         v-model="validateForm.value.endTime" placeholder="请选择结束时间"
                         @click="validateForm.controls.endTime.isShow = true; $forceUpdate();"/>
            </u-form-item>

            <u-form-item label="状态" prop="status" required>
                <u-input type="select" :select-open="validateForm.controls.status.isShow" v-model="validateForm.controls.status.textDesc"
                         placeholder="请选择状态" @click="validateForm.controls.status.isShow = true; $forceUpdate();"></u-input>
            </u-form-item>
        </u-form>

        <u-button type="error" @click="submit">提交</u-button>

        <u-select mode="single-column" label-name="name" value-name="code" :mask-close-able="false"
                  v-model="validateForm.controls.status.isShow" :list="validateForm.controls.status.options"
                  :default-value="validateForm.controls.status.defaultValue"
                  @cancel="validateForm.controls.status.isShow = false; $forceUpdate();"
                  @confirm="UFormUtil.selectSingleColumnConfirm($event, validateForm.controls.status)"></u-select>

        <u-picker mode="time" :mask-close-able="false" v-model="validateForm.controls.startTime.isShow"
                  :default-time="validateForm.value.startTime" :params="pickerFormatDatetime"
                  @cancel="validateForm.controls.startTime.isShow = false; $forceUpdate();"
                  @confirm="UFormUtil.timeConfirm($event, validateForm.controls.startTime)"></u-picker>

        <u-picker mode="time" :mask-close-able="false" v-model="validateForm.controls.endTime.isShow"
                  :default-time="validateForm.value.endTime" :params="pickerFormatDatetime"
                  @cancel="validateForm.controls.endTime.isShow = false; $forceUpdate();"
                  @confirm="UFormUtil.timeConfirm($event, validateForm.controls.endTime)"></u-picker>
    </view>
</template>

<script>

    import {CommonUtil} from "@/dev/core/utils/common.util";
    import {TbSeckillGoodsService} from "@/dev/services/tb-seckill-goods.service";
    import {SysDictionaryService} from "@/dev/services/sys-dictionary.service";
    import {UFormUtil} from "@/dev/core/utils/u-form.util";
    import myImg from '@/components/my-img'

    export default {
        data() {
            return {
                tbSeckillGoods: null,
                validateForm: {
                    value: {
                        id: '',
                        seckillPrice: '',
                        seckillNumber: '',
                        startTime: '',
                        endTime: '',
                        status: '1',
                    },
                    rules: {
                        seckillPrice: [
                            {required: true, message: '必填项!', trigger: ['change', 'blur']},
                            {pattern: /^0\.([1-9]|\d[1-9])$|^[1-9]\d{0,8}\.\d{0,2}$|^[1-9]\d{0,8}$/, message: '请输入有效的金额!', trigger: ['change', 'blur']},
                        ],
                        seckillNumber: [
                            {required: true, message: '必填项!', trigger: ['change', 'blur']},
                            {pattern: /^([1-9][0-9]*)$/, message: '请输入有效的数量!', trigger: ['change', 'blur']}
                        ],
                        startTime: [
                            {required: true, message: '必填项!', trigger: ['change', 'blur']},
                            {
                                trigger: ['blur'],
                                asyncValidator: (rule, value, callback) => {
                                    if (this.validateForm.value.startTime && this.validateForm.value.endTime) {
                                        let startTime = new Date(this.validateForm.value.startTime).getTime();
                                        let endTime = new Date(this.validateForm.value.endTime).getTime();
                                        if (startTime > endTime) {
                                            callback(new Error('开始时间不能大于结束时间！'));
                                        } else {
                                            callback()
                                        }
                                    } else {
                                        callback();
                                    }
                                }
                            }
                        ],
                        endTime: [
                            {required: true, message: '必填项!', trigger: ['change', 'blur']},
                            {
                                trigger: ['blur'],
                                asyncValidator: (rule, value, callback) => {
                                    if (this.validateForm.value.startTime && this.validateForm.value.endTime) {
                                        let startTime = new Date(this.validateForm.value.startTime).getTime();
                                        let endTime = new Date(this.validateForm.value.endTime).getTime();
                                        if (startTime > endTime) {
                                            callback(new Error('开始时间不能大于结束时间！'));
                                        } else {
                                            callback()
                                        }
                                    } else {
                                        callback();
                                    }
                                }
                            }
                        ],
                    }
                }
            }
        },
        components: {
            myImg
        },
        onReady() {
            const _self = this;
            this.tbSeckillGoods = this.objParams;
            UFormUtil.setDefaultValues(this.validateForm, this.objParams);
            new SysDictionaryService().optionList('status', null).then(result => {
                UFormUtil.setOptions(_self.validateForm.controls.status, result);
                _self.$forceUpdate();
            });
        },
        methods: {
            gotoGoodsDetail(item) {
                console.log(item);
                uni.navigateTo({
                    url: `/pages/common/goods-detail/index?${CommonUtil.objectToUrlParams(item)}`
                })
            },
            submit() {
                const _self = this;
                this.$refs.validateFormRef.validate(valid => {
                    if (valid) {
                        console.log('验证通过', _self.validateForm.value);
                        CommonUtil.alert({
                            title: '提示！',
                            content: '确认提交吗？',
                            showCancel: true, // 是否显示取消按钮
                            success: function (res) {
                                if (res.cancel) { // 点击取消,默认隐藏弹框
                                } else { // 点击确定
                                    new TbSeckillGoodsService().updateTbSeckillGoods(_self.validateForm.value).then(result => {
                                        CommonUtil.toastNavigateBack('更新成功')
                                    });
                                }
                            }
                        });
                    } else {
                        console.log('验证失败');
                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>
